import React, {useState} from 'react';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  TouchableWithoutFeedback,
} from 'react-native';
let flag = false;
import IconButton from '../../../components/IconButton';

const drawer = () => {
  const [rotate] = useState(new Animated.Value(0));
  return (
    <View
      style={{
        width: '100%',
        height: '100%',
        backgroundColor: '#171723',
        position: 'absolute',
        right: 0,
        paddingTop: 40,
      }}>
      <View style={{marginLeft: 12}}>
        <Btns name="idcard" title="个人名片" />
        <Btns name="areachart" title="创作者服务中心" />
        <TouchableWithoutFeedback
          onPress={() => {
            let toValue = flag ? 0 : 1;
            Animated.timing(rotate, {
              toValue,
              duration: 100,
              useNativeDriver: false,
            }).start(() => {
              flag = !flag;
            });
          }}>
          <View style={{flexDirection: 'row', alignItems: 'center'}}>
            <Btns name="shoppingcart" title="购物车" />
            <Animated.View
              style={{
                transform: [
                  {
                    rotate: rotate.interpolate({
                      inputRange: [0, 1],
                      outputRange: ['0deg', '180deg'],
                    }),
                  },
                ],
              }}>
              <IconButton name="caretdown" color="#fff" size={12} />
            </Animated.View>
          </View>
        </TouchableWithoutFeedback>
        <Animated.View
          style={{
            marginLeft: 30,
            height: rotate.interpolate({
              inputRange: [0, 1],
              outputRange: [0, 140],
            }),
            overflow: 'hidden',
          }}>
          <Text style={{color: '#fff'}}>订单</Text>
          <Text style={{color: '#fff'}}>列表</Text>
          <Text style={{color: '#fff'}}>服务</Text>
        </Animated.View>
      </View>
    </View>
  );
};

function Btns({name, title}) {
  return (
    <View
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: 10,
        marginBottom: 10,
        width: '90%',
      }}>
      <IconButton name={name} color="#fff" />
      <Text style={{color: '#fff', marginLeft: 10}}>{title}</Text>
    </View>
  );
}

export default drawer;

const styles = StyleSheet.create({});
